<template>
    <view class="createCustomer">
        <uni-nav-bar fixed left-icon="left" :title="title" @clickLeft="backHandle" class="unibarS">
            <block slot="right">
                <text class="sub-btn" @click="submit">保存</text>
            </block>
        </uni-nav-bar>
        <!-- 主要内容 -->
        <view class="customer-content">
            <u--form labelPosition="left" :model="params" ref="uForm" labelWidth="70">
                <u-form-item class="first-box" borderBottom ref="item1">
                    <u--input v-model="params.followupContent" border="none" placeholder="跟进任务内容"></u--input>
                </u-form-item>
                <u-form-item class="item-box" label="客户名称" @click="SelectCus()" required borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view :class="!params.customerId ? 'item-temp-text-empty' : ''">{{
                            params.customerName || '点击选择' }}</view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item class="item-box" label="跟进时间" required borderBottom ref="item1">
                    <view class="item-temp-box">
                        <uni-datetime-picker v-model="params.followupTime">
                            <view :class="!params.followupTime ? 'item-temp-text-empty' : ''">{{ params.followupTime || '点击选择' }}</view>
                        </uni-datetime-picker>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <!-- <u-form-item class="item-box" label="跟进时间" required @click="openCalendar"
                    borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view :class="!params.followupTime ? 'item-temp-text-empty' : ''">{{
                            params.followupTime || '点击选择' }}</view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item> -->
                <u-form-item class="item-box" label="跟进人员" required @click="selectHandle()"
                    borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view v-if="params.staffId" class="avatar-box">
                            <u-avatar class="avatar" size="25" :src="params.avatar"></u-avatar>
                            <text>{{ params.staffName }}</text>
                        </view>
                        <view v-else class="item-temp-text-empty">点击选择</view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <!-- <u-form-item class="item-box task-item" label="任务标记" prop="userInfo.salesman" borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view class="avatar-box">
                            <view class="tagging-item" v-for="item in taskTagging" @click="taskTaggingIndex = item.type " :style="{ backgroundColor: item.color }" :key="item.type">
                                <u-icon v-show="taskTaggingIndex == item.type" name="checkbox-mark" color="#FFFFFF" size="16"></u-icon>
                            </view>
                        </view>
                    </view>
                </u-form-item> -->
                <u-form-item class="item-box" style="margin-top: 32rpx;" label="任务提醒" @click="showSelect('reminderType')"
                    borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view :class="!params.reminderType ? 'item-temp-text-empty' : ''">{{
                            bus_followup_task[params.reminderType] || '点击选择' }}</view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item class="item-box" label="提醒方式" @click="showSelect('reminderMethod')" borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view :class="!params.reminderMethod ? 'item-temp-text-empty' : ''">{{
                            bus_reminder_method[params.reminderMethod] || '点击选择' }}</view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
            </u--form>
        </view>
        <!-- 弹出选择菜单 -->
        <u-action-sheet :show="showActionSheet" :actions="actions" title="请选择" @close="showActionSheet = false"
            @select="selectSelect">
        </u-action-sheet>
        <!-- 选择跟进日期 -->
        <uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date"
            :insert="info.insert" @confirm="confirmCalendar" @close="closeCalendar" />
    </view>
</template>

<script>
import { convertToDict, upImage } from '@/common/utils'
export default {
    data() {
        return {
            title: '新建跟进任务',
            showActionSheet: false,
            params: {
                followupContent: null,
                customerId: null,
                customerName: null,
                followupTime: null,
                reminderMethod: null,
                reminderType: null,
                staffId: null,
                staffName: null,
                avatar: null
            },
            // 弹出底部弹出菜单，展示的集合
            actions: [],
            value: 2,
            // 存储属性，用于保存当前正在编辑的表单项
            tempPropName: null,
            showCalendar: false,
            info: {
                insert: false,
                selected: []
            },
            editID: null,
            editType: null,
            // 任务标记
            // taskTagging: [
            //     { type: 1, color: '#FF001C' },
            //     { type: 2, color: '#FFC300' },
            //     { type: 3, color: '#4DACB1' },
            //     { type: 4, color: '#FF8D1A' },
            //     { type: 5, color: '#6ADED6' },
            //     { type: 6, color: '#8167F5' },
            //     { type: 7, color: '#677585' },
            // ],
            taskTaggingIndex: 1
        }
    },
    onLoad(options) {

        // 提醒方式
        this.bus_reminder = JSON.parse(uni.getStorageSync('bus_reminder_method'))
        this.bus_reminder_method = convertToDict(this.bus_reminder)

        // 任务提醒
        this.bus_followup_t = JSON.parse(uni.getStorageSync('bus_followup_task'))
        this.bus_followup_task = convertToDict(this.bus_followup_t)

        // 编辑前，查询详情
        if(options.id && options.type == 'edit') {
            this.editID = options.id
            this.editType = true
            this.title = '编辑跟进任务'
            this.getDetails()
        }
    },
    methods: {
        getDetails() {
			this.$http.get('/app/followup_record/' + this.editID, {}).then(res => {
				if (res.code == 200) {
                    this.params = res.data
				} else {
					uni.$u.toast(res.msg)
				}
			}).catch(err => {
                console.log(err)
			})
		},
        // 显示选择器
        showSelect(propName) {
            // 客户类型
            if(propName == 'reminderMethod') {
                this.actions = this.bus_reminder
            } else if(propName == 'reminderType') {
                this.actions = this.bus_followup_t
            }
            this.tempPropName = propName
            this.showActionSheet = true
        },
        // 选择客户
        SelectCus() {
            let that = this
            uni.navigateTo({
                url: '/pages/crm/customer/selectCustomer',
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    someEvent: function (data) {
                        that.params.customerId = data.data.id
                        that.params.customerName = data.data.customerName
                    },
                },
                success: function (res) {
					let obj = {
                        id: that.params.customerId,
                        customerName: that.params.customerName
                    }
                    res.eventChannel.emit('emitDataHandle', { data: obj })
                }
            });
        },
        selectSelect(e) {
            this.params[this.tempPropName] = e.dictValue
        },
        // 选择业务员
        selectHandle() {
            let that = this
            uni.navigateTo({
                url: '/pages/crm/customer/selectSalesman',
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    someEvent: function (data) {
                        that.params.staffId = data.data.userId
                        that.params.staffName = data.data.userName
                        that.params.avatar = data.data.avatar
                    },
                },
                success: function (res) {
                    // console.log('success:' + JSON.stringify(res))
                    let obj = { 
                        userId: that.params.staffId,
                        userName: that.params.staffName,
                        avatar: that.params.avatar
                    }
                    res.eventChannel.emit('emitDataHandle', { data: obj })
                }
            });
        },
        // 打开日历
        openCalendar() {
            this.$refs.calendar.open()
        },
        // 确定日期
        confirmCalendar(e) {
            console.log(e)
            this.params.followupTime = e.fulldate + ' 00:00:00'
        },
        // 关闭日历
        closeCalendar() { },
        submit() {
            console.log(this.params)
            let obj = JSON.parse(JSON.stringify(this.params))
            // true 为编辑,falase 为新增
            if(this.editType) {
                this.$http.put('/app/followup_record', obj).then(res => {
                    console.log(res)
                    let data = res.data
                    if (data.code == 200) {
                        uni.showToast({ title: '成功', duration: 1000 });
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)
                    } 
                })
            } else {
                this.$http.post('/app/followup_record', obj).then(res => {
                    let data = res.data
                    if (data.code == 200) {
                        uni.showToast({ title: '成功', duration: 1000 });
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000)
                    } 
                })
            }

        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.unibarS {
    /deep/.uni-navbar__header {
        padding: 0 32rpx;
    }

    /deep/.uni-navbar__content {
        border-bottom: none !important;
        box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.12);
    }

    .sub-btn {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(77, 172, 177, 1);
    }
}

.createCustomer {
    // background: rgba(247, 248, 250, 1);
}

.customer-content {
    margin: 20rpx 0;
}

.item-box {
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
    padding: 0 32rpx;

    /deep/.u-input__content__field-wrapper__field {
        text-align: right !important;
    }

    .rate-box,
    .item-switch {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}

.item-title {
    padding: 48rpx 32rpx 20rpx 32rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(12, 16, 25, 1);
}

.item-temp-box {
    text-align: right;
    width: 100%;
    font-size: 30rpx;

    >view {
        // 超出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.item-temp-text-empty {
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(100, 117, 136, 1);
}

.avatar-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .tagging-item {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-left: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.first-box {
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
    padding: 0 32rpx;
}

.task-item {
    margin-top: 20rpx;
}
</style>